requirejs.config({
    paths: {
        vue: "backend/shopro/common/vue"
    }
})
define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'vue'], function ($, undefined, Backend, Table, Form, Vue) {

    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'shopro/decorate/index' + location.search,
                    add_url: 'shopro/decorate/add',
                    edit_url: 'shopro/decorate/edit',
                    del_url: 'shopro/decorate/del',
                    multi_url: 'shopro/decorate/multi',
                    table: 'shopro_decorate',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'id',
                columns: [
                    [
                        { checkbox: true },
                        { field: 'id', title: __('Id') },
                        { field: 'name', title: __('Name') },
                        { field: 'memo', title: __('Memo') },
                        {
                            field: 'status',
                            title: __('Status'),
                            searchList: { "normal": __('Normal'), "hidden": __('Hidden') },
                            formatter: Table.api.formatter.status
                        },
                        {
                            field: 'platform',
                            title: __('Platform'),
                            searchList: {
                                "H5": __('Platform h5'),
                                "wxOfficialAccount": __('Platform wxofficialaccount'),
                                "wxMiniProgram": __('Platform wxminiprogram'),
                                "App": __('Platform app')
                            },
                            operate: 'FIND_IN_SET',
                            formatter: Table.api.formatter.label
                        },
                        {
                            field: 'dodecorate',
                            width: "150px",
                            title: '装修操作',
                            table: table,
                            buttons: [
                                {
                                    name: 'addtabs',
                                    title: '模块化装修',
                                    classname: 'btn btn-xs btn-warning btn-addtabs',
                                    icon: 'fa fa-paint-brush',
                                    url: 'shopro/decorate/dodecorate'
                                }
                            ],
                            formatter: Table.api.formatter.buttons
                        },
                        {
                            field: 'createtime',
                            title: __('Createtime'),
                            operate: 'RANGE',
                            addclass: 'datetimerange',
                            formatter: Table.api.formatter.datetime
                        },
                        {
                            field: 'updatetime',
                            title: __('Updatetime'),
                            operate: 'RANGE',
                            addclass: 'datetimerange',
                            formatter: Table.api.formatter.datetime
                        },
                        {
                            field: 'operate',
                            title: __('Operate'),
                            table: table,
                            events: Table.api.events.operate,
                            formatter: Table.api.formatter.operate
                        }
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        recyclebin: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    'dragsort_url': ''
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: 'shopro/decorate/recyclebin' + location.search,
                pk: 'id',
                sortName: 'id',
                columns: [
                    [
                        { checkbox: true },
                        { field: 'id', title: __('Id') },
                        { field: 'name', title: __('Name'), align: 'left' },
                        {
                            field: 'deletetime',
                            title: __('Deletetime'),
                            operate: 'RANGE',
                            addclass: 'datetimerange',
                            formatter: Table.api.formatter.datetime
                        },
                        {
                            field: 'operate',
                            width: '130px',
                            title: __('Operate'),
                            table: table,
                            events: Table.api.events.operate,
                            buttons: [
                                {
                                    name: 'Restore',
                                    text: __('Restore'),
                                    classname: 'btn btn-xs btn-info btn-ajax btn-restoreit',
                                    icon: 'fa fa-rotate-left',
                                    url: 'shopro/decorate/restore',
                                    refresh: true
                                },
                                {
                                    name: 'Destroy',
                                    text: __('Destroy'),
                                    classname: 'btn btn-xs btn-danger btn-ajax btn-destroyit',
                                    icon: 'fa fa-times',
                                    url: 'shopro/decorate/destroy',
                                    refresh: true
                                }
                            ],
                            formatter: Table.api.formatter.operate
                        }
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        advselect: function () {

            $(document).on("click", ".adv-style", function () {
                let data = {
                    styleId: $(this).attr("data-styleId"),
                    num: $(this).attr("data-num"),
                }
                Fast.api.close({ data: data, multiple: false });
            })

        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        dodecorate: function () {
            
            var vueAdd = new Vue({
                el: "#decorateApp",
                data() {
                    return {
                        decorateContent: '',
                        toolsBox: [],
                        templateData: Config.templateData,
                        centerSelect: null,
                        templateForm: {},
                        dragging: null,
                        advStyleImage: [
                            '/assets/img/shopro/adv_01.png',
                            '/assets/img/shopro/adv_02.png',
                            '/assets/img/shopro/adv_03.png',
                            '/assets/img/shopro/adv_04.png',
                            '/assets/img/shopro/adv_05.png',
                            '/assets/img/shopro/adv_06.png',
                            '/assets/img/shopro/adv_07.png',

                        ],
                        iframeSrc: Config.iframeSrc,
                        qrcodeSrc: '',

                    }
                },
                mounted() {
                    this.qrcodeSrc = 'http://qrcode.7wpp.com?url=' + this.iframeSrc;
                    this.toolsBox = [
                        {
                            name: "图文",
                            data: [
                                {
                                    name: "轮播图",
                                    type: "banner",
                                    image: "/assets/img/shopro/carousel.png",
                                    flag:false
                                }, {
                                    name: "广告魔方",
                                    type: "adv",
                                    image: "/assets/img/shopro/adv_cube.png",
                                    flag:false
                                }]
                        }, {
                            name: "商品组",
                            data: [{
                                name: "商品分类",
                                type: "goods-group",
                                image: "/assets/img/shopro/classify.png",
                                flag:false
                            }, {
                                name: "自定义商品",
                                type: "goods-list",
                                image: "/assets/img/shopro/classify-list.png",
                                flag:false
                            }]
                        }, {
                            name: "活动营销",
                            data: [{
                                name: "优惠券",
                                type: "coupons",
                                image: "/assets/img/shopro/coupon.png",
                                flag:false
                            },
                            // {
                            //     name: "拼团",
                            //     type: "groupon",
                            //     image: "/assets/img/shopro/assemble.png"
                            // },
                            {
                                name: "秒杀商品",
                                type: "seckill",
                                image: "/assets/img/shopro/secKill.png",
                                flag:false
                            }, {
                                name: "直播",
                                type: "live",
                                image: "/assets/img/shopro/live.png",
                                flag:false
                            },]
                        }, {
                            name: "其他",
                            data: [{
                                name: "菜单组",
                                type: "menu",
                                image: "/assets/img/shopro/menu.png",
                                flag:false
                            },
                            // {
                            //     name: "公告",
                            //     type: "notice",
                            //     image: "/assets/img/shopro/notice.png"
                            // },
                            {
                                name: "搜索",
                                type: "search",
                                image: "/assets/img/shopro/search.png",
                                flag:false
                            }]
                        }

                    ]

                },
                methods: {
                    selectTools(type) {
                        var form;
                        switch (type) {
                            case 'search': //√
                                form = {
                                    name: "搜索",
                                    content: "",
                                    type: "search",
                                };
                                break;
                            case 'banner':
                                form = {
                                    name: "轮播图",
                                    type: "banner",
                                    content:
                                    {
                                        name: "",
                                        style: 1,
                                        list: [{
                                            name: "",
                                            bgcolor: "",
                                            image: "",
                                            path: "",
                                            path_name: ""
                                        }],
                                    }
                                };
                                break;
                            case 'menu':
                                form = {
                                    name: "菜单组",
                                    type: "menu",
                                    content: {
                                        name: "",
                                        style: 4,
                                        list: [{
                                            name: "",
                                            image: "",
                                            path: "",
                                            path_name: ""
                                        }]
                                    }
                                };
                                break;
                            case 'live':
                                form = {
                                    name: "直播",
                                    type: "live",
                                    content:
                                    {
                                        style: 1,
                                        ids: '',
                                        name: "",
                                    }
                                };
                                break;
                            case 'adv':
                                form = {
                                    name: "广告魔方",
                                    type: "adv",
                                    content:
                                    {
                                        list: [
                                            {
                                                name: "",
                                                image: "",
                                                path: "",
                                                path_name: ""
                                            }
                                        ],
                                        name: "",
                                        style: 1
                                    }
                                };
                                break;
                            case 'goods-group':
                                form = {
                                    name: "商品分类",
                                    type: "goods-group",
                                    content:
                                    {
                                        id: '',
                                        name: "",
                                        category_name: "",
                                        image: "",
                                    }
                                };
                                break;
                            case 'goods-list':
                                form = {
                                    name: "自定义商品",
                                    type: "goods-list",
                                    content:
                                    {
                                        ids: '',
                                        image: "",
                                        name: "",

                                    }
                                };
                                break;
                            case 'coupons':
                                form = {
                                    name: "优惠券",
                                    type: "coupons",
                                    content:
                                    {
                                        ids: '',
                                        name: ''
                                    }
                                };
                                break;
                            case 'groupon':
                                form = {
                                    name: "拼团",
                                    type: "groupon",
                                    content: {
                                        id: '',
                                        activity_name: '',
                                        name: "",
                                    }
                                };
                                break;
                            case 'seckill':
                                form = {
                                    name: "秒杀",
                                    type: "seckill",
                                    content:
                                    {
                                        id: '',
                                        name: "",
                                        seckill_name: '',
                                    }
                                };
                                break;
                        }
                        this.templateData.push(form)
                        this.centerSelect = this.templateData.length - 1
                        this.showForm(this.centerSelect);

                    },
                    centerDel(idx) {
                        this.templateData.splice(idx, 1)
                    },
                    //删除子元素
                    rightDel(index) {
                        this.templateData[this.centerSelect].content.list.splice(index, 1)
                    },
                    showForm(index) {
                        this.centerSelect = index;
                        this.templateForm = this.templateData[index]
                    },
                    // 拖拽
                    handleDragStart(e, item) {
                        this.dragging = item;
                    },
                    handleDragEnd(e, item) {
                        this.dragging = null
                    },
                    handleDragOver(e) {
                        e.dataTransfer.dropEffect = 'move'
                    },
                    handleDragEnter(e, item) {
                        e.dataTransfer.effectAllowed = "move"
                        if (item === this.dragging) {
                            return
                        }
                        const newItems = [...this.templateData]
                        const src = newItems.indexOf(this.dragging)
                        const dst = newItems.indexOf(item)
                        this.centerSelect=dst
                        newItems.splice(dst, 0, ...newItems.splice(src, 1))
                        this.templateData = newItems
                        this.templateForm=newItems[dst]
                    },
                    // 添加
                    addForm(type) {
                        let form = {};
                        switch (type) {
                            case 'banner':
                                form = {
                                    image: '',
                                    path: '',
                                    name: '',
                                    bgcolor: '#ffffff',
                                    path_name: ""
                                };
                                break;
                            case 'menu':
                                form = {
                                    image: '',
                                    path: '',
                                    name: '',
                                    path_name: ''
                                };
                                break;
                        }
                        this.templateData[this.centerSelect].content.list.push(form)

                    },
                    goPreview() {
                        this.decorateContent = JSON.stringify(this.templateData);
                        var that = this;
                        Fast.api.ajax({
                            url: 'shopro/decorate/preview',
                            loading: true,
                            data: {
                                decorateContent: this.decorateContent
                            }
                        }, function (ret, res) {
                            that.iframeSrc = res.url + "&time=" + new Date().getTime();
                            that.qrcodeSrc = 'http://qrcode.7wpp.com?url=' + that.iframeSrc;
                            setTimeout(function () {
                                document.getElementById("preview").contentWindow.location.reload(true);
                            }, 1000)

                        })
                    },
                },
                watch: {
                    templateData: {
                        handler: function (newVal) {
                            newVal.length == 0 ? this.templateForm = {} : this.templateForm
                        },
                        deep: true
                    }
                }
            })
            //所有图片选择
            $(document).on("click", ".choosePicture", function () {
                var that = this;
                var multiple = $(this).data("multiple") ? $(this).data("multiple") : false;
                parent.Fast.api.open("general/attachment/select?multiple=" + multiple, "选择图片", {
                    callback: function (data) {
                        let index = $(that).attr("data-index")
                        switch (index) {
                            case "group":
                                vueAdd.$data.templateData[vueAdd.$data.centerSelect].content.image = data.url
                                vueAdd.$data.templateForm = vueAdd.$data.templateData[vueAdd.$data.centerSelect]
                                break;
                            default:
                                vueAdd.$data.templateData[vueAdd.$data.centerSelect].content.list[index].image = data.url
                                vueAdd.$data.templateForm = vueAdd.$data.templateData[vueAdd.$data.centerSelect]
                        }

                    }
                });
                return false;
            })

            //选择adv样式
            $(document).on("click", ".chooseAdvPic", function () {
                var that = this;
                var multiple = $(this).data("multiple") ? $(this).data("multiple") : false;
                parent.Fast.api.open("shopro/decorate/advselect?multiple=" + multiple, "选择样式", {
                    callback: function (data) {
                        let styleId = data.data.styleId
                        let num = data.data.num
                        vueAdd.$data.templateData[vueAdd.$data.centerSelect].content.list = []
                        vueAdd.$data.templateData[vueAdd.$data.centerSelect].content.style = styleId
                        for (let i = 0; i < num; i++) {
                            vueAdd.$data.templateData[vueAdd.$data.centerSelect].content.list.push({
                                image: "",
                                name: "",
                                path: "",
                                path_name: "",
                            })
                        }
                        vueAdd.$data.templateForm = vueAdd.$data.templateData[vueAdd.$data.centerSelect]
                    }
                });
                return false;
            })
            // 商品分类选择商品
            $(document).on("click", ".chooseCategory", function () {
                var that = this;
                var multiple = $(this).data("multiple") ? $(this).data("multiple") : false;
                parent.Fast.api.open("shopro/category/select?multiple=" + multiple, "选择分类", {
                    callback: function (data) {
                        vueAdd.$data.templateData[vueAdd.$data.centerSelect].content.category_name = data.data.category_name
                        vueAdd.$data.templateData[vueAdd.$data.centerSelect].content.id = data.data.id
                        vueAdd.$data.templateForm = vueAdd.$data.templateData[vueAdd.$data.centerSelect]
                    }
                });
                return false;
            })
            //自定义商品选择商品列表
            $(document).on("click", ".chooseGoods", function () {
                var that = this;
                var multiple = $(this).data("multiple") ? $(this).data("multiple") : false;
                parent.Fast.api.open("shopro/goods/select?multiple=" + multiple, "选择商品", {
                    callback: function (data) {
                        vueAdd.$data.templateData[vueAdd.$data.centerSelect].content.ids = data.data.ids
                        vueAdd.$data.templateForm = vueAdd.$data.templateData[vueAdd.$data.centerSelect]
                    }
                });
                return false;
            })
            // 选择优惠券类型(多选)
            $(document).on("click", ".chooseCoupons", function () {
                var that = this;
                parent.Fast.api.open("shopro/coupons/select?multiple=true", "选择优惠券", {
                    callback: function (data) {
                        vueAdd.$data.templateData[vueAdd.$data.centerSelect].content.ids = data.data.ids
                        vueAdd.$data.templateForm = vueAdd.$data.templateData[vueAdd.$data.centerSelect]
                    }
                });
                return false;
            })
            // 选择拼团商品
            $(document).on("click", ".chooseGroupon", function () {
                var that = this;
                var multiple = $(this).data("multiple") ? $(this).data("multiple") : false;
                parent.Fast.api.open("shopro/activity/activity/select?type=groupon&multiple=" + multiple, "选择拼团活动", {
                    callback: function (data) {
                        vueAdd.$data.templateData[vueAdd.$data.centerSelect].content.id = data.data.id.toString()
                        vueAdd.$data.templateData[vueAdd.$data.centerSelect].content.activity_name = data.data.title
                        vueAdd.$data.templateForm = vueAdd.$data.templateData[vueAdd.$data.centerSelect]
                    }
                });
                return false;
            })
            // 选择秒杀商品
            $(document).on("click", ".chooseSeckill", function () {
                var that = this;
                var multiple = $(this).data("multiple") ? $(this).data("multiple") : false;
                parent.Fast.api.open("shopro/activity/activity/select?multiple=" + multiple + "&type=seckill", "选择秒杀活动", {
                    callback: function (data) {
                        console.log(data)
                        vueAdd.$data.templateData[vueAdd.$data.centerSelect].content.id = data.data.id
                        vueAdd.$data.templateData[vueAdd.$data.centerSelect].content.seckill_name = data.data.title
                        vueAdd.$data.templateForm = vueAdd.$data.templateData[vueAdd.$data.centerSelect]
                    }
                });
                return false;
            })
            //选择链接chooseLive
            $(document).on("click", ".chooseLive", function () {
                var that = this;
                var multiple = $(this).data("multiple") ? $(this).data("multiple") : false;
                parent.Fast.api.open("shopro/app/live/select?multiple=true" + "&type=live", "选择直播", {
                    callback: function (data) {
                        console.log(data)
                        vueAdd.$data.templateData[vueAdd.$data.centerSelect].content.ids = data.data.ids
                        vueAdd.$data.templateForm = vueAdd.$data.templateData[vueAdd.$data.centerSelect]
                    }
                });
                return false;
            })


            //选择链接Path
            $(document).on("click", ".choosePath", function () {
                var that = this;
                var multiple = $(this).data("multiple") ? $(this).data("multiple") : false;
                parent.Fast.api.open("shopro/link/select?multiple=" + multiple, "选择链接", {
                    callback: function (data) {
                        var index = $(that).attr("data-index")
                        vueAdd.$data.templateData[vueAdd.$data.centerSelect].content.list[index].path_name = data.data.path_name
                        vueAdd.$data.templateData[vueAdd.$data.centerSelect].content.list[index].path = data.data.path
                        vueAdd.$data.templateForm = vueAdd.$data.templateData[vueAdd.$data.centerSelect]
                    }
                });
                return false;
            })

            //生成二维码        
            $(".wechart").mouseover(function () {
                $(".wechartHover").show();
            }).mouseout(function () {
                $(".wechartHover").hide();
            });

            //为了性能考虑,特意加阻断事件，拼接表单数据
            $(document).on("click", "#dosubmitBtn", function () {
                $("#modeType").val("save")
                vueAdd.$data.decorateContent = JSON.stringify(vueAdd.$data.templateData);
                var that = this;
                Layer.confirm('确认提交吗', {
                    btn: ['确认', '取消'] //按钮
                }, function () {
                    $(that).closest("form").trigger("submit");
                    Layer.closeAll();

                    return true;
                }, function () {
                    Layer.closeAll();
                    return false;
                });
            });
            //为了性能考虑,特意加阻断事件，拼接表单数据
            // $(document).on("click", "#doReleaseBtn", function () {
            //     $("#modeType").val("public")
            //     vueAdd.$data.decorateContent = JSON.stringify(vueAdd.$data.templateData);
            //     var that = this;
            //     Layer.confirm('确认提交吗', {
            //         btn: ['确认', '取消'] //按钮
            //     }, function () {
            //         $(that).closest("form").trigger("submit");
            //         Layer.closeAll();
            //
            //         return true;
            //     }, function () {
            //         Layer.closeAll();
            //         return false;
            //     });
            // });
            Controller.api.bindevent();


        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});